<html>
    <head>
        <title>传入参数</title>
    </head>
    <body>
        <script>
             /*
                         四、传入参数
                         
                                 你可以向 store.commit 传入额外的参数， 即 mutation 的 载荷 (payload)：

                                      还是以累加器的例子来实现  motation 函数的传参，来冬天定义累加的数量。

                                      1、在注册 mutation 传参(载荷)，可以传递一个参数：

                                                        // 页面路径：  store/index.js

                                                            import Vue from 'vue'
                                                            import Vuex from 'vuex'

                                                            Vue.use(Vuex);

                                                            const store = new  Vuex.Store({
                                                                state:{
                                                                    count:1
                                                                },
                                                                mutations:{
                                                                    add(state,n){ // 注册突变时，规定传入参数
                                                                        state..count +=n
                                                                    }
                                                                }
                                                            })

                                                            export defailt store;


                                                        !-- 页面路径 ：  pages/index/index.vue --

                                                        <template>
                                                            <view>
                                                                <view>数量：{{count}}</view>
                                                            </vie>
                                                        </template>

                                                        <script>
                                                            import store from  '@/store/index.js'
                                                            export default{
                                                                computed:{
                                                                    count(){
                                                                        return this.$store.state.count
                                                                    }
                                                                },
                                                                methods:{
                                                                    addCount('add',5) // 每次累加5
                                                                }
                                                            }
                                                        <//script>


                                     2、在 mutation 传参 (载荷) 也可以传递一个对象。让我们修改上面累加器的例子：

                                            // 页面路径 :  store/index.js

                                            import Vue from 'vue'
                                            import Vuex from 'vuex'

                                            Vue.use(Vuex);

                                            const store = new  Vuex.Store({
                                                state:{
                                                     count:1
                                                },
                                                mutations:{
                                                    add(state,payload){
                                                        state.count += payload.amount
                                                    }
                                                }
                                            })

                                            export default store;


                                            ！-- 页面路径 : pages/index/index.vue --

                                            <template>
                                                <view>
                                                    <view>数量: {{count}} </view>
                                                    <button @click ='addCount'>增加</button>
                                                </view>
                                            </template>
                                            <script>
                                                import store from '@/store/index.js'
                                                export default{
                                                    computed:{
                                                        count(){
                                                            return this.$store.state.count
                                                        }
                                                    },
                                                    methods:{
                                                        addCount(){ // 把载荷 和 type 分开提交
                                                            store.commit('add',{amount:10})
                                                        }
                                                    }
                                                }
                                            <//script>

                    */
        </script>
    </body>
</html>